<template>
	<view class="container">
		<view class="goodsswiper">
			<swiper class="swiper" :interval="5000" :duration="500" :indicator-dots="false" :current="topSwiperIndex"
				@change="topSwiperTab">
				<swiper-item v-for="(swiper,index) in topSwiper" :key="index">
					<image :src="swiper" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="dots">
				<text>{{topSwiperIndex+1}}/{{topSwiper.length}}</text>
			</view>
			<!--活动特价时显示-->
			<!-- <view class="hothd" v-if="ishd">
				<image class="hothdbg" src="/static/images/hothdbg.jpg"></image>
				<view class="hothd_l">￥<text>{{row.hdprice}}</text></view>
				<view class="hothd_r">
					<view class="hothd_rtxt">距离秒杀结束</view>
					<view class="hothd_rtime">
						<view class="shijian" v-if="day>0">{{day}}</view>
						<text v-if="day>0">天</text>
						<view class="shijian">{{time}}</view>
						<text>:</text>
						<view class="shijian">{{minute}}</view>
						<text>:</text>
						<view class="shijian">{{second}}</view>
					</view>
				</view>
			</view> -->
			<!--活动特价时显示end-->
		</view>
		<view class="goodscontent">
			<view class="goodsinfo">
				<view class="goodsname">{{row.name}}</view>
				<!-- <view class="goodsprice">￥{{row.price}}<text>￥{{row.oldprice}}</text></view> -->
				<view class="goodsprice">{{row.catename}}</view>
				<view class="goodsbox" style="margin-top: 20rpx;">{{row.createtime_text}}</view>
			</view>
			<!-- <view class="sharebtn" @click="yqbtn"> -->
				<!--<button open-type="share"></button>-->
				<!-- <view class="iconfont icon-fenxiang"></view><text>分享</text>
			</view> -->
		</view>
		<!-- <view class="goodscontent bordt20">
			<view class="company_dl">
				<view class="company_dt" @click="aboutus">
					<image :src="shop.image" mode="aspectFill"></image>
				</view>
				<view class="company_dd">
					<view class="company_name" @click="aboutus">{{shop.name}}</view>
					<view class="company_txt" @click="aboutus">{{shop.desc}}</view>
					<view class="company_tel" @tap="call"><text class="iconfont icon-dianhua"></text>拨打电话</view>
				</view>
				<view class="company_ico"></view>
			</view>
			<view class="company_map" @tap="map">
				<view class="company_mapl"><text class="iconfont icon-icon-GIS_dizhi"></text>{{shop.address}}</view>
				<view class="company_mapr"><text class="iconfont icon-daohang"></text>导航</view>
			</view>
		</view> -->
		<!-- <view class="goodscontent bordt20">
			<view class="ctitlebox">
				<view class="ctitle">推荐医生</view>
				<view class="imore" @click="more">查看更多<text></text></view>
			</view>
			<view class="hotys">
				<scroll-view class="hotysbox" scroll-x="true">
					<view class="hotysdl" v-for="(item,index) in doctor" :key="index">
						<navigator hover-class="none" :url="'/pages/doctordetail/doctordetail?id='+item.id">
							<view class="hotysdlbox">
								<view class="hotysdt">
									<image :src="item.avatar" mode="aspectFill"></image>
								</view>
								<view class="hotysdd">
									<view class="hotysdl_t"><text>{{item.name}}</text>{{item.jibie}}</view>
									<view class="hotysdl_b">擅长：{{item.tags}}</view>
								</view>
							</view>
						</navigator>
					</view>

				</scroll-view>
			</view>
		</view> -->
		<view class="goodscontent bordt20">
			<view class="ctitlebox">
				<view class="ctitle">简介</view>
			</view>
			<view class="goodsbox">
				<rich-text :nodes="row.desc"></rich-text>
			</view>
		</view>
		
		<view class="goodscontent bordt20">
			<view class="ctitlebox">
				<view class="ctitle">图文详情</view>
			</view>
			<view class="goodsbox">
				<rich-text :nodes="row.content"></rich-text>
			</view>
		</view>
		<!-- <view class="goodscontent bordt20">
			<view class="ctitlebox">
				<view class="ctitle">门店展示</view>
			</view>
			<view class="mdinner">
				<view class="mdinner_li" v-for="(item,index) in shop.images" :key="index">
					<image :src="item" mode="aspectFill" @click="previewImage(index)"></image>
				</view>
			</view>
		</view> -->
		<view class="bottombox">
			<view class="botlink" @tap="homebtn()">
				<view class="iconfont" :class="shouc"></view><text>收藏</text>
			</view>
			<!-- <view class="botlink" @click="callme"><button></button>
				<view class="iconfont icon-shouye1"></view><text>咨询</text>
			</view>
			<view class="botbtn" @click="topay">
				立即支付
			</view> -->
		</view>
		<uni-popup ref="popup" @change="change">
			<view class="popup-content">
				<view class="pop_block">
					<!--<image src="/static/images/hbimg.jpg" mode="widthFix"></image>-->
					<image :src="path" mode="widthFix"></image>
					<l-painter :board="poster" isCanvasToTempFilePath @success="path = $event" hidden />
				</view>
				<view class="pop_btn" @click="download"><text class="iconfont icon-xiazai"></text>
					//#ifdef MP-WEIXIN
					保存图片分享到朋友圈中
					//#endif
					//#ifdef WEB
					长按图片保存
					//#endif
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import API from "@/common/api.js";
	//#ifdef WEB
	import jweixin from 'weixin-js-sdk'
	//#endif
	export default {
		data() {
			return {
				path: '',
				poster: {
					css: {
						width: "750rpx",
						paddingBottom: "40rpx",
						background: "linear-gradient(,#ffffff 0%, #dcecff 100%)"
					},
					views: [{
							type: "view",
							css: {
								marginTop: "60rpx",
								paddingLeft: "20rpx",
								display: "block"
							},
							views: [{
									text: "",
									type: "text",
									css: {
										display: "block",
										paddingBottom: "10rpx",
										color: "#222",
										fontSize: "44rpx",
										textAlign: 'center',
										fontWeight: "bold"
									}
								},
								{
									text: "",
									type: "text",
									css: {
										display: "block",
										color: "#666",
										textAlign: 'center',
										fontSize: "28rpx"
									},
								}
							],
						},
						{
							css: {
								marginLeft: "40rpx",
								marginTop: "30rpx",
								padding: "32rpx",
								boxSizing: "border-box",
								background: "#fff",
								borderRadius: "20rpx",
								width: "670rpx",
							},
							views: [{
								src: "",
								type: "image",
								css: {
									objectFit: "cover",
									objectPosition: "50% 50%",
									width: "606rpx",
									height: "606rpx"
								},
							}, {
								css: {
									marginTop: "32rpx"
								},
								views: [{
									text: "",
									type: "text",
									css: {
										color: "#333",
										fontSize: "34rpx",
										lineHeight: "1.5em"
									},
								}],

								type: "view"
							}, {
								css: {
									marginTop: "30rpx"
								},
								views: [{
									type: "view",
									css: {
										width: "380rpx",
										marginTop: "20rpx",
										paddingRight: "20rpx",
										display: "inline-block"
									},
									views: [{
										text: "查看详情",
										type: "text",
										css: {
											fontSize: "30rpx",
											paddingLeft: "40rpx",
											paddingRight: "40rpx",
											display: "inline-block",
											height: "64rpx",
											lineHeight: "64rpx",
											borderRadius: "32rpx",
											color: "#fff",
											background: "#4dd1a2"
										},
									}, {
										text: "长按识别二维码查看更多",
										type: "text",
										css: {
											marginTop: "30rpx",
											color: "#666",
											fontSize: "28rpx"
										},
									}],
								}, {
									//#ifdef WEB
									text: "",
									type: "qrcode",
									//#endif
									//#ifdef MP-WEIXIN
									src: "",
									type: "image",
									//#endif
									css: {
										width: "180rpx",
										height: "180rpx",
									},

								}],
								type: "view"
							}],
							type: "view"
						}
					]
				},


				row: [],
				zhuanfa: [],
				countdown: '',
				day: '',
				time: '',
				minute: '',
				second: '',
				timer: null,
				topSwiperIndex: 0,
				topSwiper: [],
				shop: [],
				doctor: [],
				ishd: 0,
				id: 0,
				hdid: 0,
				shouc: "icon-shoucang"
			};
		},
		onLoad(options) {

			var $this = this
			var shopid = uni.getStorageSync("shopid");
			//#ifdef MP-WEIXIN
			var isminapp = 1;
			//#endif
			//#ifdef WEB
			var isminapp = 0
			//#endif
			if (options.hdid != undefined) {
				this.ishd = 1;
				this.id = 0;
				this.hdid = options.hdid;
				this.timer = setInterval(() => {
					this.showtime()
				}, 1000)
				API.post("product/prodetail", {
					hdid: options.hdid,
					id: 0,
					isminapp: isminapp,
					isshop: API.isshop,
					shopid: shopid
				}).then((res) => {
					if (res.code == 1) {
						$this.row = res.data
						$this.topSwiper = res.data.images
						$this.shop = res.data.shop
						$this.doctor = res.data.doctor

						//海报
						$this.poster.views[0].views[0].text = $this.shop.name
						$this.poster.views[0].views[1].text = "来自：" + res.data.nickname + "的分享"
						$this.poster.views[1].views[0].src = $this.row.image
						$this.poster.views[1].views[1].views[0].text = $this.row.name
						if (isminapp == 1) {
							$this.poster.views[1].views[2].views[1].src = res.data.ewm
						} else {
							$this.poster.views[1].views[2].views[1].text = res.data.ewm
						}


						if (res.data.shouc == 1) {
							$this.shouc = "icon-shoucang1"
						}

					}
				})
			} else {
				this.ishd = 0;
				this.id = options.id;
				this.hdid = 0;
				API.post("product/prodetail", {
					id: options.id,
					hdid: 0,
					isminapp: isminapp,
					isshop: API.isshop,
					shopid: shopid
				}).then((res) => {
					if (res.code == 1) {
						$this.row = res.data
						$this.topSwiper = res.data.images
						$this.shop = res.data.shop
						$this.doctor = res.data.doctor

						//$this.poster.views[0].views[0].text = res.data.shop.name
						//console.log($this.poster)
						//海报
						$this.poster.views[0].views[0].text = $this.shop.name
						$this.poster.views[0].views[1].text = "来自：" + res.data.nickname + "的分享"
						$this.poster.views[1].views[0].src = $this.row.image
						$this.poster.views[1].views[1].views[0].text = $this.row.name
						if (isminapp == 1) {
							$this.poster.views[1].views[2].views[1].src = res.data.ewm
						} else {
							$this.poster.views[1].views[2].views[1].text = res.data.ewm
						}


						if (res.data.shouc == 1) {
							$this.shouc = "icon-shoucang1"
						}
					}
				})
			}

			API.post("common/zhuanfa").then((res) => {
				if (res.code == 1) {
					$this.zhuanfa = res.data
				}
			})



		},
		//#ifdef MP-WEIXIN 
		onShareAppMessage: function(res) {
			return {
				title: this.row.name,
				path: '/pages/index/index?id=' + this.id + "&hdid=" + this.hdid,
				imageUrl: this.row.image
			}
		},
		onShareTimeline: function() {
			return {
				title: this.row.name,
				query: '/pages/index/index?id=' + this.id + "&hdid=" + this.hdid,
				imageUrl: this.row.image
			}
		},
		//#endif
		methods: {
			download() {
				//#ifdef MP-WEIXIN 
				var byte = this.path.replace("data:image/png;base64,", "");
				const fs = uni.getFileSystemManager();
				var number = Math.random();
				var $this = this
				fs.writeFile({
					filePath: uni.env.USER_DATA_PATH + '/code' + number + '.png',
					data: byte,
					encoding: "base64",
					success(res) {

						uni.saveImageToPhotosAlbum({
							filePath: uni.env.USER_DATA_PATH + '/code' + number + '.png',
							success: function(res) {
								$this.close()
								uni.showToast({
									title: "下载成功",
									icon: "success"
								});
							},
							fail: function(err) {
								console.log(err)
							}
						})
					}
				})
				//#endif
			},
			yqbtn() {
				if (this.row.userid > 0) {
					this.$refs.popup.open('center')
				} else {
					API.showModal("请先登录", "/pages/user/login/login")
				}

			},
			close() {
				this.$refs.popup.close()
			},
			more() {
				uni.switchTab({
					url: "/pages/doctor/doctor"
				})
			},
			callme() {
				uni.makePhoneCall({
					phoneNumber: this.zhuanfa.kefu
				});
			},
			topay(e) {
				var $this = this
				API.post("user/getUser", {}).then((res) => {
					if (res.data.islogin == 1 && res.code == 1) {
						uni.navigateTo({
							url: "/pages/orderpay/orderpay?id=" + $this.id + "&hdid=" + $this.hdid
						})
					} else {
						API.showModal("请先登录", "/pages/user/login/login")
					}
				})
			},
			aboutus() {
				uni.navigateTo({
					url: "/pages/user/about/about?id=" + this.shop.id
				})
			},
			call(e) {
				uni.makePhoneCall({
					phoneNumber: this.shop.mobile
				});
			},
			map(e) {
				var $this = this
				if (this.shop.jing && this.shop.wei) {
					// #ifdef WEB
					var surl = encodeURIComponent(window.location.href.split('#')[0]);
					API.post("common/jweixin", {
						surl: surl
					}).then((res) => {
						if (res.code == 1) {
							jweixin.config({
								debug: res.data.debug,
								appId: res.data.appId,
								timestamp: res.data.timestamp,
								nonceStr: res.data.nonceStr,
								signature: res.data.signature,
								surl: res.data.url,
								jsApiList: res.data.jsApiList
							});

							jweixin.ready(function() {
								jweixin.openLocation({
									latitude: Number($this.shop.wei),
									longitude: Number($this.shop.jing),
									name: $this.shop.name || '',
									address: $this.shop.address
								});

							});

						}
					})
					// #endif
					// #ifndef WEB
					uni.openLocation({
						latitude: Number($this.shop.wei),
						longitude: Number($this.shop.jing),
						name: $this.shop.name || '',
						address: $this.shop.address
					});
					// #endif
				}

			},
			homebtn() {
				/*
				uni.switchTab({
					url: '/pages/index/index'
				})*/
				var $this = this
				API.post("product/bookmark", {
					id: this.row.id
				}).then((res) => {
					if (res.code == 1) {
						API.showToast(res.msg)
						if (res.data == 1) {
							$this.shouc = "icon-shoucang1"
						} else {
							$this.shouc = "icon-shoucang"
						}
					} else {
						API.showToast(res.msg)
					}
				})

			},
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.shop.images
				});
			},
			topSwiperTab(e) {
				this.topSwiperIndex = Number(e.detail.current);
			},
			showtime() {
				var nowtime = new Date(), //获取当前时间
					endtime = new Date(this.row.hd_end); //定义结束时间

				var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
					leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
					lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24) < 10 ? "0" + Math.floor(lefttime / (1000 * 60 *
						60) % 24) : Math.floor(lefttime / (1000 * 60 * 60) % 24), //计算小时数
					leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) :
					Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
					lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
						lefttime / 1000 % 60); //计算秒数    
				//this.countdown =  leftd + "天" + lefth + ":" + leftm + ":" + lefts;  //返回倒计时的字符串
				this.day = leftd; //返回天 
				this.time = lefth; //返回时
				this.minute = leftm; //返回分
				this.second = lefts; //返回秒
				// 倒计时结束时，显示00:00:00
				if (lefttime < 0) {
					this.time = this.minute = this.second = "00"
				}
			},
		}
	}
</script>

<style lang="scss">
	@import '@/static/style.css';

	.container {
		padding-bottom: 130rpx;
	}

	.goodsswiper {
		position: relative;
	}
	

	.goodsswiper .swiper {
		width: 100%;
		height: 450rpx;
	}

	.goodsswiper .swiper image {
		width: 100%;
		height: 450rpx;
		display: block;
	}

	.dots {
		padding: 0 20rpx;
		line-height: 50rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 100rpx;
		font-size: 30rpx;
		color: rgba(255, 255, 255, 0.8);
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		text-align: center;
		letter-spacing: 3rpx;
	}

	.hothd {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.hothd .hothdbg {
		width: 100%;
		height: 120rpx;
	}

	.hothd_l {
		position: absolute;
		left: 17%;
		top: 50%;
		transform: translateY(-50%);
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
	}

	.hothd_l text {
		font-size: 44rpx;
	}

	.hothd_r {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #2d0365;
		text-align: right;
	}

	.hothd_rtxt {
		font-size: 26rpx;
	}

	.hothd_rtime {
		margin-top: 12rpx;
		line-height: 36rpx;
	}

	.hothd_rtime .shijian {
		display: inline-block;
		padding: 0 6rpx;
		border-radius: 10rpx;
		background: #5d3988;
		color: #fff;
		margin: 0 4rpx;
	}

	.goodscontent {
		padding: 30rpx;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.goodsinfo {
		width: 82%;
		float: left;
	}

	.goodsname {
		font-size: 36rpx;
		font-weight: bold;
		line-height: 48rpx;
	}

	.goodsprice {
		font-size: 40rpx;
		font-weight: bold;
		color: #ff6600;
		margin-top: 16rpx;
	}

	.goodsprice text {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
		font-weight: normal;
		margin-left: 20rpx;
	}

	.sharebtn {
		text-align: center;
		float: right;
		margin-top: 10rpx;
		color: #999;
		position: relative;
	}

	.sharebtn .iconfont {
		font-size: 40rpx;
	}

	.sharebtn button {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100% !important;
		height: 100%;
		opacity: 0;
		padding: 0;
		margin: 0;
	}

	.sharebtn text {
		width: 100%;
		overflow: hidden;
		margin-top: 8rpx;
		display: block;
	}




	.goodsbox {
		margin-top: 30rpx;
		line-height: 48rpx;
		font-size: 26rpx;
	}

	.mdinner {
		width: 100%;
		margin-top: 10rpx;
		overflow: hidden;
	}

	.mdinner_li {
		width: 48%;
		height: 340rpx;
		float: left;
		margin-top: 30rpx;
		overflow: hidden;
	}

	.mdinner_li:nth-child(even) {
		margin-left: 4%;
	}

	.mdinner_li image {
		width: 100%;
		height: 100%;
	}

	.bottombox {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		box-shadow: 0px 0 30rpx 0px rgba(0, 0, 0, 0.06);
		background: #fff;
		display: flex;
	}

	.botlink {
		width: 140rpx;
		text-align: center;
		padding-top: 24rpx;
		line-height: 44rpx;
		position: relative;
	}

	.botlink text {
		display: block;
		font-size: 28rpx;
	}

	.botlink .iconfont {
		font-size: 44rpx;
	}

	.botbtn {
		flex: 1;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 130rpx;
		background: $color;
		text-align: center;
	}

	.botlink button {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100% !important;
		height: 100%;
		opacity: 0;
		padding: 0;
		margin: 0;
	}

	.popup-content {
		width: 80vw;
		text-align: center;
	}

	.pop_block {
		width: 100%;
		overflow: hidden;
	}

	.pop_block image {
		width: 100%;
	}

	.pop_btn {
		display: inline-block;
		padding: 0 60rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		background: $color;
		color: #fff;
		font-size: 32rpx;
		margin: 30rpx auto 0;
	}

	.pop_btn text {
		padding-right: 10rpx;
	}
</style>